<template>
  <div class="scrolling-container">
    <div class="scrolling-header">
      <div class="scrolling-title">监测信息</div>
      <div class="scrolling-stats">
        <div class="stat-item">
          <span class="stat-label">今日识别:</span>
          <span class="stat-value">28</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">准确率:</span>
          <span class="stat-value">89.3%</span>
        </div>
      </div>
    </div>
    <div class="scrolling-inner">
      <vue3-seamless-scroll
          :list="scrollingData"
          :hover="true"
          :step="0.5"
          :wheel="true"
          class="scroll-wrapper"
      >
        <div v-for="(data,index) in scrollingData" :key="index" class="scrolling-items">
          <div class="item-header">
            <div class="bird-type">
              <div class="bird-icon">
                <img src="@/assets/title1/niao.png" style="width: 100%"/>
              </div>
              <span class="bird-name">{{data.name}}</span>
            </div>
            <div class="detection-time">{{data.time}}</div>
          </div>
          <div class="confidence">
            <div class="confidence-bar">
              <div
                  class="confidence-fill"
                  :style="{ width: data.confidence + '%', background: getConfidenceColor(data.confidence) }"
              ></div>
            </div>
            <div class="confidence-value" :style="{ color: getConfidenceColor(data.confidence) }">
              {{data.confidence}}%
            </div>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
//@ts-ignore
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

// 滚动显示的数据
const scrollingData = reactive([
  { name: '白鹭', time: '10:23:45', confidence: 92 },
  { name: '麻雀', time: '10:24:01', confidence: 85 },
  { name: '乌鸦', time: '10:25:12', confidence: 96 },
  { name: '黄鹂', time: '10:26:23', confidence: 78 },
  { name: '喜鹊', time: '10:27:34', confidence: 89 },
  { name: '画眉', time: '10:28:45', confidence: 91 },
  { name: '翠鸟', time: '10:29:56', confidence: 83 },
  { name: '啄木鸟', time: '10:30:07', confidence: 95 },
  { name: '布谷鸟', time: '10:31:18', confidence: 87 },
  { name: '燕子', time: '10:32:29', confidence: 94 }
])

// 根据置信度获取颜色
const getConfidenceColor = (confidence: number) => {
  if (confidence >= 90) return '#10B981' // 绿色
  if (confidence >= 80) return '#F59E0B' // 橙色
  return '#EF4444' // 红色
}
</script>

<style scoped>
.scrolling-container {
  width: 28%;
  height: 88%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  border: 1px solid #d5dae0;
}

.scrolling-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.scrolling-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #e0f7fa, #c8e6c9, #a5d6a7);
  color: #64748b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scrolling-title {
  font-size: 20px;
  font-weight: bold;
}

.scrolling-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
}

.scrolling-inner {
  flex: 1;
  padding: 15px;
  overflow: hidden;
}

.scroll-wrapper {
  height: 100%;
}

.scrolling-items {
  background: #ffffff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.scrolling-items:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #dbeafe;
  background: #f8fafc;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.bird-type {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bird-icon {
  width: 32px;
  height: 32px;
  background: lightblue;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.bird-name {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.detection-time {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.confidence {
  display: flex;
  align-items: center;
  gap: 15px;
}

.confidence-bar {
  flex: 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.confidence-value {
  font-size: 16px;
  font-weight: bold;
  min-width: 50px;
  text-align: right;
}
</style>